<template>
  <div class="order_goods_box">
    <span class="info_title">商品信息</span>
      <el-row class="order_tab_head">
        <el-col :span="9" class="good_tit">商品信息</el-col>
        <el-col :span="5">商品单价</el-col>
        <el-col :span="5">商品数量</el-col>
        <el-col :span="5" class="head-pri-total">商品总价(元)</el-col>
      </el-row>
      <ul >
        <div class="activity-goods" v-for="(item, index) in madeData[0]" :key="index">
          <div class="act-title"><div v-if="ruleReady"><span class="act-tag">{{ ruleSum(item)[1] }}</span>{{ ruleSum(item)[0] }}</div></div>
          <li class="order_tab_body" v-for="(goodsItem, goodsIndex) in item[1]" :key="goodsIndex">
              <div class="sku_img">
                <div class="activity_img">
                  <img :src="prefixImg + goodsItem.goodsImg" :alt="goodsItem.goodsName" :title="goodsItem.goodsName" @error="catchErrorImage($event)"/>
                  <span class="discount-tag" v-if="goodsItem.activity">活动</span>
                </div>
                <div class="shopcart_img_text">
                  <p class="text">【{{goodsItem.brandName}}】{{goodsItem.goodsName}}<em v-show="goodsItem.other">- {{goodsItem.other}}</em></p>
                  <span class="text">{{goodsItem.productName}}</span>
                </div>
              </div>
              <span class="sku_price" > {{goodsItem.productPrice | floatPrices}}</span>
              <span class="sku_amount" > x{{goodsItem.number}}</span>

              <div class="sku_total" >
                  ¥{{goodsItem.pmtAmount > 0
                  ? (goodsItem.number * goodsItem.productPrice - goodsItem.pmtAmount).toFixed(2)
                  : (goodsItem.number * goodsItem.productPrice).toFixed(2)}}
                    <p class="prefer-price" v-if="parseFloat(goodsItem.pmtAmount) > 0">
                      已优惠¥{{goodsItem.pmtAmount | floatPrices}}元
                    </p>
                    <!-- <el-tooltip  placement="bottom">
                      <span slot="content">已优惠商品{{goodsItem.lockedNum}}件</span>
                      <em class="el-icon-info"></em>
                    </el-tooltip> -->
                </div>
          </li>
        </div>
        <div class="act-title gray"><span class="act-tag">普通商品</span></div>
        <div v-for="(goodsItem, goodsIndex) in madeData[1]" :key="goodsIndex">
          <li class="order_tab_body">
              <div class="sku_img">
                <div class="activity_img">
                  <img :src="prefixImg + goodsItem.goodsImg" :alt="goodsItem.goodsName" :title="goodsItem.goodsName" @error="catchErrorImage($event)"/>
                  <span class="discount-tag" v-if="goodsItem.activity">活动</span>
                </div>
                <div class="shopcart_img_text">
                  <p class="text">【{{goodsItem.brandName}}】{{goodsItem.goodsName}}<em v-show="goodsItem.other">- {{goodsItem.other}}</em></p>
                  <span class="text">{{goodsItem.productName}}</span>
                </div>
              </div>
              <span class="sku_price" > {{goodsItem.productPrice | floatPrices}}</span>
              <span class="sku_amount" > x{{goodsItem.number}}</span>

              <div class="sku_total" >
                  ¥{{goodsItem.pmtAmount > 0
                  ? (goodsItem.number * goodsItem.productPrice - goodsItem.pmtAmount).toFixed(2)
                  : (goodsItem.number * goodsItem.productPrice).toFixed(2)}}
                    <p class="prefer-price" v-if="parseFloat(goodsItem.pmtAmount) > 0">
                      已优惠¥{{goodsItem.pmtAmount | floatPrices}}元
                    </p>
                    <!-- <el-tooltip  placement="bottom">
                      <span slot="content">已优惠商品{{goodsItem.lockedNum}}件</span>
                      <em class="el-icon-info"></em>
                    </el-tooltip> -->
                </div>
          </li>
        </div>
      </ul>
  </div>
</template>

<script>
  import {Row, Col, Button, Dialog, Input, RadioGroup, Radio, Tooltip} from 'element-ui'
  import {prefixImg} from '@/tool/index'
  import {activityFull} from '@/service/get-data'

  export default {
    name: 'goodsInfo',
    components: {
      elRow: Row,
      elCol: Col,
      elButton: Button,
      elDialog: Dialog,
      elInput: Input,
      elRadioGroup: RadioGroup,
      elRadio: Radio,
      elTooltip: Tooltip
    },
    props: {
      orderInfosList: [Array, Object],
      nowDiscount: [Number]
    },
    data () {
      return {
        orderList: [],
        type: 0, // 退货类型
        reason: '', // 退换货原因
        curGoodsId: '', // 当前退货货品的id
        ruleList: {}, // 活动规则列表
        ruleReady: false, // 活动规则是否请求完成
        propReady: false
      }
    },
    methods: {
      catchErrorImage (e) {
        e.target.src = require('img/newload.png')
      },
      // 活动规则
      async activityPromotion (fun) {
        let res = await activityFull(1, 1, null)
        res = res.data
        if (res.resultCode === 2000) {
          res.data.voList.forEach((item) => {
            this.ruleList[item.id] = {name: item.name, rule: item.discountRuleVOS}
          })
          fun()
        }
      },
      // 活动优惠总价文字
      ruleSum (item0) {
        const list = item0[1]
        const rule = this.ruleList[item0[0]]
        const sum0 = list.reduce((total, cur, i) => {
          let sum = total[0]
          let pri2 = total[1]
          sum += Number(cur.number)
          pri2 += Number(cur.pmtAmount)
          return [sum, pri2]
        }, [0, 0])
        let sum1 = sum0[0]
        let sum2 = sum0[0]
        rule.rule.forEach((item, index) => {
          if (item.num > sum1) {
            return false
          } else {
            sum2 = item.num
          }
        })
        return [`活动商品已购满${sum2}件 , 已优惠 ￥${sum0[1]}`, rule.name]
      }
    },
    computed: {
      prefixImg () {
        return prefixImg
      },
      madeData () {
        const obj = {}
        const arr = [] // 普通商品list
        const brr = [] // 活动商品组list
        this.orderList.forEach((item) => {
          if (item.activityId && this.ruleList.hasOwnProperty(item.activityId)) {
            if (!obj.hasOwnProperty(item.activityId)) {
              obj[item.activityId] = []
            }
            obj[item.activityId].push(item)
          } else {
            arr.push(item)
          }
        })
        for (const i in obj) {
          brr.push([i, obj[i]])
        }
        return [brr, arr]
      }
    },
    mounted () {
      this.activityPromotion(() => {
        console.log(this.orderInfosList)
        this.ruleReady = true
        if (this.propReady) {
          this.orderList = this.orderInfosList
        }
      })
    },
    watch: {
      orderInfosList () {
        this.propReady = true
        if (this.ruleReady) {
          this.orderList = this.orderInfosList
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  .activity-goods{
    width: 100%;
    overflow: hidden;
    float: left;
    &>*{
      float: left;
    }
  }
  .act-title{
    width: 100%;
    font-size: 12px;
    margin: 0;
    height: 38px;
    background-color: #FF7300;
    color: #fff;
    line-height: 38px;
    overflow: hidden;
    text-align: right;
    box-sizing: border-box;
    padding-right: 70px;
    &.gray{
      background-color: #EEEEEE;
      color: #333333;
    }
    a{
      color: #fff;
      float: right;
      margin-right: 40px;
    }
    .act-content{
      float: right;
      margin-right: 32px;
    }
    .act-tag{
      float: left;
      display: inline-block;
      box-sizing: border-box;
      margin-left: 20px;
    }
  }
  .discount-tag1{
    width:180px;
    height:20px;
    display: inline-block;
    font-size:12px;
    font-weight:500;
    color:rgba(255,255,255,1);
    line-height:20px;
    text-align: center;
    background-color: #FF0000;
  }
  .info_title{
    display:inline-block;
    color: #333333;
    font-size: 18px;
    line-height: 25px;
    margin-top: 25px;
    margin-bottom: 12px;
    // font-weight: 600;
  }
  .good_tit{
    text-align: left;
    padding-left: 120px;
  }
  .order_tab_head{
    height: 47px;
    line-height: 47px;
    border-bottom: 1px solid #dcdcdc;
    border-top: 1px solid #dcdcdc;
    text-align: center;
    color: #474747;
    // background: #f0f0f0;
    font-size: 14px;
  }
  .head-pri-total{
    text-align: right;
    padding-right:  70px;
  }
  .order_tab_body{
      display: table;
      width: 100%;
      color: #474747;
      min-height: 50px;
      padding: 18px 0;
     @include border_bt();
     .order_tab_spu{
       vertical-align: top;
       font-size: 16px;
       display: inline-block;
       width: 20%;
       text-align: center;
     }
      .sku_img, .sku_price, .sku_amount, .sku_total{
        display: table-cell;
        text-align: center;
        vertical-align: middle;
      }
      .sku_img{
        width: 36%;
        text-align: left;
      }
      .activity_img{
          position: relative;
          display: inline-block;
          margin-left: 30px;
          width: 65px;
          height: 65px;
          vertical-align: middle;
          & > img{
            width: 100%;
            height:100%;
          }
      }
      .shopcart_img_text{
        width: 270px;
        display:inline-block;
        vertical-align: middle;
        padding-left: 24px;
        font-size: 0;
        .text{
          width: 100%;
          display: inline-block;
          padding-right: 14px;
          font-size: 16px;
          line-height:2.0;
        }
      }
      .sku_price, .sku_amount, .sku_total{
        width: 20.83333%;
      }
      .sku_total{
        box-sizing: border-box;
        padding-right: 70px;
        text-align: right;
        font-size: 18px;
        color: #F55923;
        font-weight: 600;
      }
  }
  .prefer-price{
      color: #474747;
      font-size: 12px;
      margin-top: 10px;
    }
  .exchange{
    color: #474747;
    display: table;
    width:100%;
    line-height: 30px;
    .sku_img{
        width: 37.5%;
        text-align: left;
        img{
          margin-left: 62px;
          width: 60px;
          height:60px;
          vertical-align: middle;
        }
      }
    .sku_name .sku_price, .sku_amount, .sku_total{
      font-size: 16px;
      width:20.83%;
      text-align: center;
    }
    .sku_total{
      font-size: 18px;
      color: #F55923;
      font-weight: 600;
    }
    .exchange-btn{
      display: table-cell;
      margin-top: 20px;
      margin-left: 15px;
    }
  }
  .submitBtn{
    float: right;
     margin-top: 20px;
  }
</style>
